<template>
  <div class="wrap">
    <Breadcrumb>
        <BreadcrumbItem to="/">首页</BreadcrumbItem>
        <BreadcrumbItem to="/components/breadcrumb">部门管理</BreadcrumbItem>
        <BreadcrumbItem>编辑</BreadcrumbItem>
    </Breadcrumb>
    <Row class="row">
      <Col span="5" style="border:1px solid #ccc;min-height:500px;">
        <Tree ref="tree" :data="treeData" :load-data="loadData"></Tree>
      </Col>
      <Col span="19" class="form">
        <Form ref="formInline" :model="sysDepartment"  >
            <FormItem>
                <Button type="primary" icon="save" size='small' @click="save">保存</Button>
            </FormItem>
          <FormItem  label="部门名称">
              <Input type="text" v-model="sysDepartment.deptName" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="部门编码">
              <Input type="text" v-model="sysDepartment.deptCode" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="部门排序">
              <Input type="text" v-model="sysDepartment.deptSeq" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="上级部门">
              <Input type="text" v-model="sysDepartment.parentDeptName" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="行政区划编码">
              <Input type="text" v-model="sysDepartment.xzqh" placeholder="">
              </Input>
          </FormItem>
        </Form>
        
      </Col>
    </Row>
    <Modal
        v-model="modal"
        title="新增部门"
        mask-closable="false"
        loading="false"
        @on-ok="saveDept"
        width="600"
        scrollable='true'
        transfer='false'
        @on-cancel="cancel">
        <Form ref="formInline" :model="subDept"  label-position="left"  :label-width="100" >
          <FormItem  label="部门名称">
              <Input type="text" v-model="subDept.deptName" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="部门编码">
              <Input type="text" v-model="subDept.deptCode" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="部门排序">
              <Input type="text" v-model="subDept.deptSeq" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="上级部门">
              <Input type="text" v-model="subDept.parentDeptName" placeholder="">
              </Input>
          </FormItem>
          <FormItem  label="行政区划编码">
              <Input type="text" v-model="subDept.xzqh" placeholder="">
              </Input>
          </FormItem>
        </Form>
    </Modal>
  </div>
</template>
<script>
export default {
  data(){
    return{
      treeData:[],
      modal:false,
      id:'',
      data:{},
      sysDepartment:{
        deptId:'',
        deptName:'',
        deptCode:'',
        deptSeq:'',
        parentDeptName:'',
        parentDeptCode:'',
        xzqh:''
      },
      subDept:{
        deptId:'',
        deptName:'',
        deptCode:'',
        deptSeq:'',
        parentDeptName:'',
        parentDeptCode:'',
        xzqh:''
      }
    }
  },
  created(){
    this.getTreeData(null,this.$store.getters.getUser.deptCode)
  },
  methods:{
    loadData(item, callback){
        console.log('item',item)
        this.id = item.deptCode
        this.getTreeData(callback)
        /*
        setTimeout(() => {
            const data = [
                {
                    title: 'children',
                    loading: false,
                    children: []
                },
                {
                    title: 'children',
                    loading: false,
                    children: []
                }
            ];
            callback(data);
        }, 1000);
        */
    },
    saveDept(){
        this.$post('sys/departmentSave',this.subDept,'',false)
        .then(res=>{
            console.log(res)
            //alert(res.success);
            if(res.success){
                console.log('保存成功')
                this.$Message.info('保存成功')
                let self = this
                setTimeout(()=>{
                    this.modal = false
                    //this.getTreeData(null,this.$store.getters.getUser.deptCode)
                    //this.created()
                    //self.$router.push({name:'deptList'});
                    //this.append(this.data,subData)
                },1500)
                
            }
        })
        .catch(err=>{
            console.log('error',err)
        })
    },
    getTreeData(callback,deptCode){
        //?id='+this.id
      this.$fetch('sys/departmenttree',{id:this.id,deptCode})
      .then(result=>{
        var res = result
        if(res.success){
          result.treeList.forEach(item=>{
            item.children = []
            item.render = (h, { root, node, data }) => {
                console.log('data',data)
                var button = [];
                button.push(
                    h('Button', {
                        props:{
                            icon: 'ios-add',
                            size:'small',
                            class:'small'
                        },
                        style: {
                            marginRight: '8px',
                            padding:'0 3px'
                        },
                        on: {
                            click: () => {  
                                this.modal = true
                                this.data = data
                                this.$fetch('sys/getDeptCode',{parentDeptCode:data.deptCode})
                                .then(result=>{
                                    if(result.success){
                                        this.subDept.deptCode = result.data.code
                                        this.subDept.deptSeq = result.data.seq
                                        this.subDept.parentDeptName = data.title
                                        this.subDept.deptName = (data.name+"1")
                                        this.subDept.parentDeptCode = data.deptCode
                                        this.subDept.deptId = ''
                                        this.subDept.xzqh = data.xzqh
                                    } else {
                                        this.subDept.deptCode = ''
                                        this.subDept.deptSeq = ''
                                        this.subDept.parentDeptName = data.title
                                        this.subDept.deptName = (data.name+"1")
                                        this.subDept.parentDeptCode = data.deptCode
                                        this.subDept.deptId = ''
                                        this.subDept.xzqh = data.xzqh
                                    }
                                })
                                
                            }
                        }
                    }),
                )
                if(!data.hasChildren){
                    button.push(
                        h('Button', {
                            props: Object.assign({}, this.buttonProps, {
                                icon: 'ios-remove',
                                size:'small'
                            }),
                            style: {
                                padding:'0 3px'
                            },
                            on: {
                                click: () => { 
                                     this.$Modal.confirm({
                                        title: '确认',
                                        content: '您确认要删除【'+data.title+'】吗？',
                                        onOk: () => {
                                            let flag = this.delete(data.id,root, node, data)
                                        },
                                        onCancel: () => {
                                            //this.$Message.info('Clicked cancel');
                                        }
                                    });
                                 }
                            }
                        })
                    )
                }
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span',{
                        on:{
                            click:()=>{
                                this.sysDepartment.deptId = data.id
                                this.sysDepartment.deptName = data.title
                                this.sysDepartment.deptCode = data.deptCode
                                this.sysDepartment.xzqh = data.xzqh
                                this.sysDepartment.deptSeq = data.seq
                                this.sysDepartment.parentDeptName  = data.parentDeptName
                                
                            }
                        }
                    }, [
                        h('Icon', {
                            props: {
                                type: 'ios-folder-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span', {
                            on: {
                                click: () => { 
                                    
                                }
                            }
                        },data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    },button
                    )
                ]);
            }
          })
          if(callback){
                callback(result.treeList)
          } else {
                this.treeData = result.treeList
          }
        
        }
      })
    },
    append (data,subData) {
        console.log('**',data)
        console.log('sub',subData)
        const children = data.children || [];
        children.push(subData);
        this.$set(data, 'children', children);
    },
    remove (root, node, data) {
        const parentKey = root.find(el => el === node).parent;
        const parent = root.find(el => el.nodeKey === parentKey).node;
        const index = parent.children.indexOf(data);
        parent.children.splice(index, 1);
    },
     delete(id,root, node, data){
     this.$fetch('sys/deptDelete',{id})
      .then(result=>{
        if(result.success){
          this.$Message.info('删除成功')
          setTimeout(()=>{
              this.remove(root, node, data)
          },1500)
        } else {
          this.$Message.error('删除失败')
          return false
        }
        //console.log('res',res)
      })
    }
  }
}
</script>
<style scoped>
.form{
  padding:10px;
  padding-left:40px;
}
.row{
  margin:10px;
}
</style>


